<template>
    <div id="footer">
        <div>
            <p><van-icon name="shopping-cart" /></p>
        </div>
        <div>
            <span>￥{{$store.getters.count}}</span>
            <span>另需配送费￥4元</span>
            </div>
        <div>￥20起送</div>
    </div>
</template>
<script>
export default {
    
}
</script>
<style lang="scss" scoped>
    #footer{
        position: relative;
        width: 100%;
        height: 104px;
        background: #141d27;
        padding-left: 36px;
        div{
            &:nth-of-type(1){
                padding-top: 12px;
                padding-bottom: 16px;
                position: absolute;
                bottom: 0;
                width: 88px;
                height: 116px;
                background: #141d27;
              border-top-left-radius: 50px;
              border-top-right-radius: 50px;
              p{
                display: flex;
                justify-content: center;
                align-items: center;
                  width: 100%;
                  height: 100%;
                  border-radius: 50%;
                  background: #2b343c;
                  .van-icon{
                    color: #80858a;
                    font-size: 50px;
                  }
              }
            }
            &:nth-of-type(2){
                margin-left: 124px;
                height: 100%;
                display: flex;
                align-items: center;
                span{    
                    &:nth-of-type(1){
                        color:#919396;
                        font-size: 26px;
                        font-weight: 700;
                        margin-right: 20px;
                    }
                    &:nth-of-type(2){
                        line-height: 60px;
                        height: 60px;
                        padding-left:24px ;
                        border-left: 2px solid #2c343d;
                        font-size: 22px;
                        color: #8b8d90;
                        
                    }
                }
            }
                &:nth-of-type(3){
                        width: 210px;
                        height: 100%;
                        background: #2b333b;
                        position: absolute;
                        right: 0;
                        bottom: 0;
                        font-size: 24px;
                        color:#919396 ;
                        line-height: 102px;
                        text-align: center;
                    }
        }
    }
</style>